<template>
	<div class="app-container">
		<el-card class="box-card">
			<template #header>
				<div class="card-header">
					<span>物业费详情</span>
					<el-button @click="handleBack">返回</el-button>
				</div>
			</template>

			<el-descriptions :column="2" border>
				<el-descriptions-item label="房屋编号">{{
					detail.houseNumber
				}}</el-descriptions-item>
				<el-descriptions-item label="缴费年份">{{
					detail.year
				}}</el-descriptions-item>
				<el-descriptions-item label="缴费月份">{{
					detail.month
				}}</el-descriptions-item>
				<el-descriptions-item label="缴费金额"
					>{{ detail.amount }}元</el-descriptions-item
				>
				<el-descriptions-item label="缴费状态">
					<el-tag :type="detail.status === 'Paid' ? 'success' : 'warning'">
						{{ detail.status === "Paid" ? "已缴费" : "未缴费" }}
					</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="缴费时间">
					{{
						detail.paidAt
							? dayjs(detail.paidAt).format("YYYY-MM-DD HH:mm:ss")
							: "-"
					}}
				</el-descriptions-item>
				<el-descriptions-item label="房屋类型">{{
					detail.house?.type
				}}</el-descriptions-item>
				<el-descriptions-item label="建筑面积"
					>{{ detail.house?.area }}平方米</el-descriptions-item
				>
				<el-descriptions-item label="所在楼层">{{
					detail.house?.floor
				}}</el-descriptions-item>
				<el-descriptions-item label="业主姓名">{{
					detail.house?.owner?.name
				}}</el-descriptions-item>
				<el-descriptions-item label="联系电话">{{
					detail.house?.owner?.phone
				}}</el-descriptions-item>
				<el-descriptions-item label="备注" :span="2">
					<div class="content">{{ detail.notes || "-" }}</div>
				</el-descriptions-item>
			</el-descriptions>

			<!-- 缴费记录 -->
			<div
				v-if="detail.paymentHistory && detail.paymentHistory.length > 0"
				class="history-section"
			>
				<h3>缴费记录</h3>
				<el-table :data="detail.paymentHistory" style="width: 100%">
					<el-table-column prop="amount" label="缴费金额" width="120">
						<template #default="scope"> {{ scope.row.amount }}元 </template>
					</el-table-column>
					<el-table-column prop="paidAt" label="缴费时间" width="180">
						<template #default="scope">
							{{ dayjs(scope.row.paidAt).format("YYYY-MM-DD HH:mm:ss") }}
						</template>
					</el-table-column>
					<el-table-column prop="paymentMethod" label="缴费方式" width="120">
						<template #default="scope">
							{{ scope.row.paymentMethod === "Cash" ? "现金" : "转账" }}
						</template>
					</el-table-column>
					<el-table-column prop="operator" label="操作人" width="120" />
					<el-table-column prop="notes" label="备注" />
				</el-table>
			</div>
		</el-card>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import dayjs from "dayjs";
import { getPropertyFee } from "@/api/property";

const route = useRoute();
const router = useRouter();

// 详情数据
const detail = ref({});

// 获取详情
const getDetail = async () => {
	try {
		const res = await getPropertyFee(route.params.id);
		detail.value = res;
	} catch (error) {
		console.error("获取物业费详情失败:", error);
	}
};

// 返回按钮
const handleBack = () => {
	router.push("/property/fee/list");
};

onMounted(() => {
	getDetail();
});
</script>

<style scoped>
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.content {
	white-space: pre-wrap;
	line-height: 1.5;
}
.history-section {
	margin-top: 30px;
}
</style>
